<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      "v-if" 当变量为 false 时 该dom和其子元素都不会被渲染；
      "v-show" 当变量为 false 时 该dom被添加 "display:noen" 的属性；
      使用场景：当需要不显示div 但是提交时需要获取其中的 value 时 可使用 v-show 来控制显示隐藏；
      当需要频繁切换显示隐藏时使用 v-show 
      当只有一次或者不频繁是 优先考虑使用 v-if
     -->
    <h1 v-if="isShow">{{message}}</h1>
    <h1 v-show="isShow">{{message}}</h1>
    <button @click="isShow = !isShow">显示隐藏</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        message:'你好啊，李银河！',
        isShow:true
      }
    },
    methods:{
 
    },
    computed:{
 
    }
  })
  </script>
</body>
</html>